<template>
  <!-- 新增登记使用 -->
  <div class="layout">
    <ContainerTitle text="新增登记使用"></ContainerTitle>
    <el-form
      ref="form"
      :inline="true"
      :model="form"
      :rules="rules"
      label-width="120px"
      style="text-align: left"
    >
      <el-form-item label="资金使用事项：" prop="capitalUsage">
        <el-input
          v-model.trim="form.capitalUsage"
          maxlength="100"
          placeholder="请输入资金使用事项"
        ></el-input>
      </el-form-item>
      <el-form-item label="政策名称：" prop="capitalMatters">
        <el-input
          v-model.trim="form.capitalMatters"
          disabled
          maxlength="100"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="申报金额：" prop="declaredAmount">
        <el-input
          disabled
          maxlength="100"
          v-model.trim="declaredAmount"
          placeholder="请输入"
        >
          <template slot="suffix">
            <span style="color: #333333; margin-right: 5px; font-size: 16px"
              >万元</span
            >
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="使用额度：" prop="usageLimit">
        <el-input
          maxlength="100"
          v-model.trim="form.usageLimit"
          placeholder="使用额度"
        >
          <template slot="suffix">
            <span style="color: #333333; margin-right: 5px; font-size: 16px"
              >万元</span
            >
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="资金流向处：" prop="moneyFlow">
        <el-input
          maxlength="100"
          v-model.trim="form.moneyFlow"
          placeholder="请输入资金流向处"
        ></el-input>
      </el-form-item>
      <el-form-item label="使用时间：" prop="usageTime">
        <el-date-picker
          maxlength="100"
          v-model.trim="form.usageTime"
          value-format="yyyy-MM-dd HH:HH:mm:ss"
          type="date"
          placeholder="请选择使用时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="项目类别：" prop="projectCategory">
        <el-input
          maxlength="100"
          v-model.trim="form.projectCategory"
          placeholder="请输入项目类别"
        ></el-input>
      </el-form-item>
      <el-form-item label="经手人：" prop="manager">
        <el-input
          maxlength="100"
          v-model.trim="form.manager"
          placeholder="请输入经手人"
        ></el-input>
      </el-form-item>
      <el-form-item label="审核人：" prop="reviewer">
        <el-input
          maxlength="100"
          v-model.trim="form.reviewer"
          placeholder="请输入审核人"
        ></el-input>
      </el-form-item>
      <el-form-item label="审核时间：" prop="reviewerTime">
        <el-date-picker
          maxlength="100"
          v-model.trim="form.reviewerTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="date"
          placeholder="请选择审核时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="上传相关材料：" prop="fileUrl">
        <addUpload @changeUp="changeUp"></addUpload>
        <!-- <div style="text-align: left">
          <el-button
            class="uploadBtn"
            icon="el-icon-upload"
            @click="selectFile()">上传文件</el-button>
          <div
            style="display: flex; align-items: center"
            v-for="(file, index) in files"
            :key="index">
            <span>{{ file.name }}</span>
            <i
              class="el-icon-close deleteBtn"
              @click="deleteFile(index)"></i>
          </div>
          <input
            type="file"
            ref="fileInput"
            accept=".rar,.zip,.dox,.docx,.pdf,.jpg"
            @change="changeFile"
            v-show="false"/>
          <div style="color: #999999">
            支持发票，相关详细金额使用文件 支持扩展名：.rar .zip .dox .docx
            .pdf .jpg
          </div>
        </div> -->
      </el-form-item>
    </el-form>
    <div class="btn-bottom">
      <Buttons :buttons="buttons" @goBack="goBack" @apply="apply"></Buttons>
      <!-- <div class="cancelBtn" @click="goBack()">取消</div>
      <div class="sendBtn" @click="apply">申请</div> -->
    </div>
  </div>
</template>
<script>
import capitalRegisterAddRules from "@/formRules/financial/capitalRegisterAddRules.js";

import addUpload from "@/components/financiaUpload";
import { addRegistration } from "@/common/api/company.js";
export default {
  components: {
    addUpload,
  },
  mixins: [capitalRegisterAddRules],
  data() {
    return {
      buttons:[
        { text: "取消", type: "normal", size: "l", method: "goBack" },
        { text: "申请", type: "success", size: "l", method: "apply" },
      ],
      name: "finance",
      // crumbs: [
      //   {
      //     label: "企业空间",
      //     value: "company",
      //   },
      //   {
      //     label: "金融服务",
      //     value: "",
      //   },
      //   {
      //     label: "资金使用登记",
      //     value: "capitalRegister",
      //   },
      //   {
      //     label: "新增登记使用",
      //     value: "",
      //     choose: true,
      //   },
      // ],
      declaredAmount: "",
      files: [],
    };
  },
  mounted() {
    this.form.capitalId = localStorage.getItem("capitalId");
    this.form.capitalMatters = localStorage.getItem("capitalMatters");
    this.declaredAmount = localStorage.getItem("declaredAmount") / 10000;
    this.form.declaredAmount = localStorage.getItem("declaredAmount");
  },
  methods: {
    /**
     * 上传文件触发
     * @param obj 上传文件数据
     * @return {void}
     */
    changeUp(obj) {
      this.form.fileUrl = obj[0].batchId;
      this.$refs["form"].validateField("fileUrl");
    },
    goBack() {
      this.$router.back()
    },
    apply() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          this.$confirm("您确定做此次操作，保存后将无法修改", "", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            callback: (action) => {
              action == "confirm" && this.submit();
            },
          });
        } else {
          this.$message({
            type: "warning",
            message: "请正确填写内容",
          });
        }
      });
    },
    async submit() {
      let res = await addRegistration(this.form);
      if (res.code == 200) {
        this.$message({
          type: "success",
          message: "申请成功",
        });
        this.goBack();
      } else {
        this.$message({
          type: "error",
          message: res.msg,
        });
      }
    }
  },
};
</script>
<style scoped>
::v-deep .el-input {
  width: 265px;
}
.breadcrumb {
  width: 1000px;
  margin: 20px 0;
}
.backBtn {
  border: 1px solid #eeeeee;
  white-space: nowrap;
  font-size: 12px;
  height: 30px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
}
.roomDiv {
  display: flex;
  justify-content: center;
}

.roomDiv .leftDiv {
  width: 200px;
  text-align: left;
}

.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
}
.titleDiv {
  border-bottom: 2px solid #045db9;
  text-align: left;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #045db9;
  margin-bottom: 20px;
}
.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}
.uploadBtn {
  background-color: #f1f2f4;
  color: #045db9;
  border-width: 0;
}
.deleteBtn {
  font-size: 20px;
  color: #d00000;
  font-weight: bold;
  margin-left: 10px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.btn-bottom {
  text-align: center;
}
.btn-bottom .cancelBtn {
  border: 1px solid #eeeeee;
  display: inline-block;
  font-size: 14px;
  padding: 10px 46px;
  text-align: center;
  border-radius: 5px;
  margin-right: 10px;
}
.btn-bottom .cancelBtn:hover {
  cursor: pointer;
  box-shadow: 0px 0px 5px #eeeeee;
}
.btn-bottom .sendBtn {
  padding: 10px 46px;
  background-color: #045db9;
  display: inline-block;
  color: #ffffff;
  border-radius: 5px;
  transition: all 0.2s ease 0s;
  margin-right: 10px;
}
.btn-bottom .sendBtn:hover {
  box-shadow: 0px 5px 5px #e1e1e1;
  cursor: pointer;
}
</style>